<template>
    <d2-container>
        <div
            style="display:flex;justify-content: space-between;align-items: center;border-bottom:1px solid #eee;height:45px;margin-bottom:10px;">
            <div>
                <div style="float:left;" @click="absolutePath(-1)">
                    <span class="add-item">根目录</span>
                    <i class="el-icon-arrow-right"></i>
                </div>
                <div style="float:left;" v-for="(item,index) in address" :key="index" @click="absolutePath(index)">
                    <span class="add-item">{{item}}</span>
                    <i class="el-icon-arrow-right"></i>
                </div>
            </div>

            <div>
                <el-button size="small" round icon="el-icon-refresh" @click="refreshDataTable()">刷新</el-button>
                <el-button size="small" round icon="el-icon-wallet" @click="createFolder()">新建文件夹</el-button>
                <el-button size="small" round icon="el-icon-download" @click="createFolder()">下载</el-button>
                <el-button size="small" round icon="el-icon-share" @click="createFolder()">分享</el-button>
                <el-button size="small" round icon="el-icon-delete" @click="createFolder()">删除</el-button>
            </div>
        </div>

        <div v-for="(item,index) in dataList" :key="index" class="img-box"
            :class="{'active-img-box':currentObj.name == item.name}" @click="select(item)">
            <d2-icon-svg name="dir" class="img" v-if="item.type == 'dir'" />
            <d2-icon-svg name="file" class="img" v-if="item.type == 'file'" />
            <div class="filename">{{item.name}}</div>
            <!-- <div>
                <span>{{item.date}}</span>
                <span>{{item.size}}kb</span>
            </div> -->
        </div>
    </d2-container>
</template>

<script>
    import * as filemanagerService from '@/api/file/filemanager'

    export default {
        name: "file-catalog",
        data() {
            return {
                dataList: [],
                loading: false,
                address: [],
                currentObj: {}
            }
        },
        components: {},
        mounted() {
            this.getDataTable();
        },
        methods: {
            refreshDataTable() {
                this.getDataTable(this.getFullPath());
            },
            // 获取数据列表
            getDataTable(name) {
                this.loading = true
                let query = {
                    path: '',
                };
                if (name != '' && typeof name != 'undefined' && name != null) {
                    query.path = name
                }
                filemanagerService.getfilemanagercatalog(query).then(data => {
                    this.dataList = data
                    this.loading = false;
                }).catch((res) => {
                    this.loading = false;
                });
            },
            absolutePath(ids) {
                if (ids >= 0) {
                    ids++
                    if (this.address != null && this.address.length > 0) {
                        this.address = this.address.slice(0, ids)
                        let path = this.address
                        const filepath = "/" + path.join("/");
                        this.getDataTable(filepath)
                    }
                } else {
                    const filepath = '/';
                    this.address = []
                    this.getDataTable(filepath)
                }

            },
            getFullPath() {
                let path = this.address
                const filepath = "/" + path.join("/") + "/";
                return filepath;
            },
            createFolder() {

                this.$prompt('请输入文件夹名称', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                }).then(({
                    value
                }) => {
                    var params = {
                        'newPath': this.getFullPath() + value
                    }

                    filemanagerService.createFolder(params).then(data => {
                        this.$message({
                            message: '操作成功',
                            type: 'success',
                            duration: 1500,
                            onClose: () => {
                                this.getDataTable(this.getFullPath());
                            }
                        })
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });
                });

            },
            dbclickHandler(obj) {
                if (obj.type == 'dir') {
                    this.address.push(obj.name)
                    this.getDataTable(obj.name)
                } else if (obj.type == 'file') {
                    alert("触发" + this.currentObj)
                }
            },
            select(obj) {
                if (obj.name == this.currentObj.name) {

                    this.currentObj = obj
                    if (obj.type == 'dir') {
                        this.address.push(obj.name)
                        this.getDataTable(obj.name)
                    } else if (obj.type == 'file') {
                        alert("对文件单独操作" + JSON.stringify( this.currentObj))
                    }
                } else {
                    this.currentObj = obj
                }
            }
        }
    }
</script>
<style scoped>
    .img-box {
        width: 120px;
        height: 120px;
        float: left;
        margin-right: 10px;
        font-size: 8px;
        cursor: pointer;
        border-radius: 5px;
        user-select: none;
        border: 1px solid transparent;
    }

    .img-box:hover {
        background: rgba(64, 158, 255, 0.2);
        border: 1px solid rgba(64, 158, 255, .8);
    }

    .active-img-box {
        background: rgba(64, 158, 255, 0.2);
        border: 1px solid rgba(64, 158, 255, .8);
    }

    .img {
        width: 60px;
        height: 60px;
        margin: 0 auto;
        display: block;
        margin-top: 20px;
    }

    .filename {
        margin-top: 10px;
        width: 96%;
        font-size: 13px;
        text-align: center;
        height: 20px;
        line-height: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        user-select: none;
    }

    .add-item {
        display: inline;
        padding: 5px 10px;
        border-radius: 5px;
        border: 1px solid #eee;
        margin: 0 10px;
        font-size: 13px;
        cursor: pointer;
    }
</style>